<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <div class="modt-box">菜单管理</div>
      <el-col :span="4"></el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small" type="primary">全部展开</el-button>
          <el-button size="small" type="primary">全部压缩</el-button>
        </div>
        <el-tree class="tree-class" ref="tree" :data="treeData" default-expand-all="" :props="defaultProps"
                 @node-click="treeNodeClick" @check-change="handleChangeClick" check-strictly node-key="id"
                 show-checkbox></el-tree>
      </el-col>
      <el-col :span="18">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addMenu">添加</el-button>
        </div>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="父级菜单" prop="parentId">
            <el-select size="small" v-model="form.pid" placeholder="请选择" class="form-select">
              <el-option v-for="menuParam in pidMenus" :key="menuParam.id" :label="menuParam.menuName" :value="menuParam.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名称" prop="menuName">
            <el-input size="small" v-model="form.menuName"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="moduleIcon">
            <el-input size="small" v-model="form.icon"></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="url">
            <el-input size="small" v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="顺序" prop="sort">
            <el-input size="small" v-model="form.sort"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="saveMenu('form')">保存</el-button>
            <el-button size="small" type="primary" v-show="showDelete" @click="deleteMenu">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getRequest, postRequest} from '../../utils/api'

export default {
  data () {
    return {
      showDelete: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        addUser: '',
        editUser: '',
        addTime: '',
        editTime: '',
        pid: '',
        id: '',
        menuLevel: '',
        command: '',
        icon: '',
        sort: '',
        menuName: '',
        url: ''
      },
      // rules表单验证
      rules: {
        pid: [
          {required: true, message: '请选择父级菜单', trigger: 'blur'}
        ],
        menuName: [
          {required: true, message: '请输入菜单名称', trigger: 'blur'}
        ],
        // moduleIcon: [
        //   {required: true, message: '请输入菜单图标', trigger: 'blur'}
        // ],
        url: [{required: true, message: '请输入URL', trigger: 'blur'}],
        sort: [
          {required: true, message: '请输入菜单顺序', trigger: 'blur'}
        ]
      },
      pidMenus: []
    }
  },
  created () {
    this.getData()
    this.getMenu(this.form.id)
  },
  methods: {
    getData (parameter) {
      this.loading = true
      getRequest('/system/menu/menuTreeList', parameter).then(resp => {
        this.loading = false
        if (resp && resp.code === 0 && resp.data) {
          this.treeData = resp.data
        }
      })
    },
    addMenu () {
      this.showDelete = false
      this.form.addUser = ''
      this.form.editUser = ''
      this.form.id = ''
      this.form.pid = ''
      this.form.menuLevel = ''
      this.form.icon = ''
      this.form.sort = ''
      this.form.command = ''
      this.form.url = ''
    },
    getMenu (id) {
      let parameter = {
        id: id
      }
      getRequest('/system/menu/getParentList', parameter).then(resp => {
        this.loading = false
        if (resp && resp.code === 0 && resp.data) {
          this.pidMenus = resp.data
        }
      })
    },
    handleChangeClick (data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.showDelete = true
      } else {
      }
    },
    treeNodeClick (arr, node, self) {
      let parameter = {'id': arr.id}
      getRequest('/system/menu/detail', parameter).then(resp => {
        console.log(JSON.stringify(resp))
        this.form = resp.data
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([arr])
        this.loading = false
      }).catch(err => {
        console.log(JSON.stringify(err))
        this.loading = false
        this.$message.error('获取当前菜单失败，请稍后再试！')
      })
    },
    // 保存菜单
    saveMenu (editData) {
      this.form.command = 'command'
      this.$refs[editData].validate(valid => {
        if (valid) {
          postRequest('/system/menu/save', this.form).then(resp => {
            this.getData()
            this.getMenu()
          })
        } else {
          return false
        }
      })
    },
    deleteMenu () {
      postRequest('/system/menu/delete', this.form).then(resp => {
        this.getData()
        this.getMenu()
        this.$message.error('菜单删除成功！')
      }).catch(err => {
        console.log(JSON.stringify(err))
        this.$message.error('菜单删除失败，请稍后再试！')
      })
    }
  }
}
</script>

<style>
  .user-search {
    margin-top: 20px !important;
  }

  .user-search td {
    margin-top: 20px !important;
  }

  .el-table__expanded-cell {
    padding: 0px !important;
    margin: 0px !important;
  }

  .modt-box {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f0f2f5;
    text-align: center;
    color: #334157;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .mod-btnbox {
    margin-bottom: 20px;
  }

  .tree-class {
    border: 1px solid #f3f3f3;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .form-select {
    width: 100%;
  }
</style>
